<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="手机号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
              allow-clear
            >
              <a-input placeholder="请输入要设置管理员的手机号" v-model="phone"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24" >
            <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="setAdmin">添加管理员权限</a-button>
            </span>
          </a-col>
        </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <standard-table
        :rowKey="(record, index) => index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="avatar_url" slot-scope="avatar_url">
          <a-avatar :size="64" :src="avatar_url.text" icon="user" />
        </template>
        <template slot="action" slot-scope="item">
          <a-button type="danger" @click="handleDelete(item)">删除权限</a-button>
        </template>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import * as Api from '@/services/index'

const columns = [
  {
    title: '用户ID',
    dataIndex: 'id'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
  },
  {
    title: '昵称',
    dataIndex: 'name'
  },
  {
    title: '头像',
    dataIndex: 'avatar_url',
    slots: { avatar_url: 'avatar_url' },
    scopedSlots: { customRender: 'avatar_url' }
  },
  // {
  //   title: '微信授权ID',
  //   dataIndex: 'oauth_id',
  //   width: 160
  // },
  {
    title: '注册时间',
    dataIndex: 'created_at'
  },
  {
    title: '最后登录时间',
    dataIndex: 'updated_at'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]


export default {
  name: 'QueryList',
  components: {StandardTable},
  data () {
    return {
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: { 
        pageSize: 10, 
        total: 1,
        current: 1,
      },
      isSearch: false,
      user_id: '',
      phone: ''
    }
  },
  created() {
    this.getAdminList()
  },
  authorize: {
    deleteRecord: 'delete'
  },
  methods: {
    initPage() {
      this.pagination = { 
        pageSize: 10, 
        total: 1,
        current: 1,
      }
      this.isSearch = false
    },
    // 列表
    getAdminList() {
      Api.AdminList({page: this.pagination.current}).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 分页
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getAdminList()
    },
    // 搜索
    submitSearch() {
      this.initPage()
      if (!this.user_id && !this.phone) {
        this.getAdminList()
      } else {
        this.isSearch = true
        this.getSearchList()
      }
    },
    getSearchList() {
      let params = {
        id: this.user_id,
        phone: this.phone,
      }
      Api.UserSearch(params).then(res => {
        this.dataSource = res.data
      })
    },
    // 重置搜索参数
    reset() {
      this.user_id = ''
      this.phone = ''
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    // 删除管理员
    handleDelete(item) {
      this.$confirm({
        title: '确定删除该人的管理员权限？',
        onOk: () => {
          Api.CancelAdmin({phone: item.record.phone}).then(() => {
            this.getAdminList()
          }).catch(() => {
          })
          // logout()
        },
        onCancel() {},
      });
      
      // Api.CancelAdmin({phone: this.phone}).then(res => {

      // })
    },
    // 设置管理员
    setAdmin() {
       Api.SetAdmin({phone: this.phone}).then(() => {
        this.getAdminList()
      }).catch(() => {
      })
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    // margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
